<template>
	<view class="projectDetails">
		<view class="projectDetails-header" :style="tabberStyle">
			<view class="ff-bg-blue">
				<image class="projectDetails-header-bg"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/compang-details-bg.png"
					mode=""></image>
				<view class="projectDetails-header-content ff-bg-fff ff-border-radius-10">
					<view class="ff-font-16 ff-font-weight-600 ff-color-000 ff-margin-bottom-5 ff-line-height-1-3">
						{{ detectionDetails.testName }}
					</view>
					<view class="ff-align-items-one ff-flex-wrap">
						<view class="ff-margin-right-10">
							<view v-if="detectionDetails.testStatus == 2" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;已响应</view>
							<view v-if="detectionDetails.testStatus == 3" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;待指派</view>
							<view v-if="detectionDetails.testStatus == 11" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;待检测</view>
							<view v-if="detectionDetails.testStatus == 4" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;检测中</view>
							<view v-if="detectionDetails.testStatus == 5" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;待提交</view>
							<view v-if="detectionDetails.testStatus == 6" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;待审核</view>
							<view v-if="detectionDetails.testStatus == 7" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;待签发</view>
							<view v-if="detectionDetails.testStatus == 8" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;已驳回</view>
							<view v-if="detectionDetails.testStatus == 9" class="tips1 ff-font-12">
								检测状态&nbsp;|&nbsp;已完成</view>
							<view v-if="detectionDetails.testStatus == 10" class="tips5 ff-font-12">
								检测状态&nbsp;|&nbsp;已解约</view>
							<view v-if="detectionDetails.testStatus == 12" class="tips5 ff-font-12">
								检测状态&nbsp;|&nbsp;已作废</view>
							<view v-if="detectionDetails.testStatus == 13" class="tips5 ff-font-12">
								检测状态&nbsp;|&nbsp;已提交</view>
						</view>
						<view v-if="detectionDetails.rescissionStatus == 1"
							class="tips4 ff-color-fff ff-font-12 ff-margin-right-10">解约确认中</view>
					</view>
					<view class="ff-font-13 projectDetails-header-content-address ff-line-height-1-3 ff-flex">
						<view>委托单位：</view>
						<view>{{ detectionDetails.companyName || '/' }}</view>
					</view>
					<view class="ff-font-13 projectDetails-header-content-address ff-line-height-1-3 ff-flex">
						<view>工程地址：</view>
						<view>{{ detectionDetails.testAddr || '/' }}</view>
					</view>
					<view class="ff-font-13 projectDetails-header-content-time ff-flex">
						<view>更 新 于：</view>
						<view>
							{{ detectionDetails.modified == null ? '/' : detectionDetails.modified.substr(0, detectionDetails.modified.length - 3) }}
						</view>
					</view>
					<view
						:class="{ oneBUt: detectionDetails.rescissionStatus !== 0 && detectionDetails.rescissionStatus !== 1 && detectionDetails.rescissionStatus !== 2 }"
						class="projectDetails-header-content-but ff-flex-around ff-margin-top-20 ff-margin-bottom-5">
						<u-button v-if="detectionDetails.rescissionStatus == 1 && roleStatus == 2" @click="rescindClick"
							type="primary" size="medium" plain>确定解约</u-button>
						<u-button v-if="detectionDetails.rescissionStatus == 2" size="medium" plain>解约完成</u-button>
						<u-button @click="demandDetailsClick" type="primary" size="medium">查看需求详情</u-button>
					</view>
					<view v-if="detectionDetails.rescissionStatus == 1"
						class="projectDetails-header-content-noResult ff-align-items-one ff-line-height-1-3 ff-font-13 ff-border-radius-5 ff-padding-10">
						<view><u-icon name="info-circle" color="#FF0000" size="43"></u-icon></view>
						<view class="ff-margin-left-5">请注意，社会单位已对本项目发起解约申请，如有异议，请尽快与社会单位联系。</view>
					</view>
				</view>
				<view class="projectDetails-content ff-bg-fff ff-border-radius-10">
					<view
						class="projectDetails-content-title ff-font-16 ff-font-weight-600 ff-color-111 ff-margin-bottom-16">
						检测记录</view>
					<view>
						<u-time-line>
							<u-time-line-item nodeTop="7" v-if="
									detectionDetails.testStatus == 3 || detectionDetails.testStatus == 4 ||
										detectionDetails.testStatus == 5 ||
										detectionDetails.testStatus == 6 ||
										detectionDetails.testStatus == 7 ||
										detectionDetails.testStatus == 8 ||
										detectionDetails.testStatus == 11 ||
										detectionDetails.testStatus == 9 ||
										detectionDetails.testStatus == 10 ||
										detectionDetails.testStatus == 12
								">
								<template v-slot:content>
									<view>
										<view class="ff-margin-bottom-15 reportTime ff-font-13">
											开始时间：{{ detectionDetails.startTime != null ? detectionDetails.startTime : '/' }}
										</view>
										<view
											v-if="detectionDetails.testStatus != 2 || detectionDetails.testStatus != 3"
											class="reportBut ff-margin-bottom-18">
											<u-button @click.stop="mechanismDetailsClick(detectionDetails)"
												type="warning" size="medium" plain>检测详情</u-button>
										</view>

										<view v-if="detectionDetails.testStatus == 9"
											class="reportBut ff-margin-bottom-18">
											<u-button @click.stop="reportClick" type="warning" size="mini"
												plain>检测报告</u-button>
											<u-button @click.stop="files" type="warning" size="mini"
												plain>检测档案</u-button>
											<u-button @click.stop="contract" type="warning" size="mini"
												plain>合同</u-button>
										</view>
										<view
											v-if="(detectionDetails.testStatus != 9 && detectionDetails.testStatus != 10 && detectionDetails.testStatus != 12) && roleStatus == 2">
											<u-button @click.stop="voidMechanismClick(detectionDetails)" type="error"
												size="medium" plain>作废本次检测</u-button>
										</view>
									</view>
								</template>
							</u-time-line-item>
							<u-time-line-item nodeTop="7">
								<template v-slot:content>
									<view>
										<view class="reportTime ff-font-13">
											<text class="ff-margin-right-5">响应成功：</text>
											{{ detectionDetails.contractTime || '' }}
										</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>
					</view>
				</view>
			</view>
		</view>
		<!-- 解约合同弹框 -->
		<u-modal v-model="rescindModal" show-cancel-button="true" @confirm="rescindConfirm" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="对方申请解约合同，请确认是否解约合同？" />
		<!-- 报告书弹框 -->
		<u-modal v-model="reportModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="报告书正在生成，请稍后查看!" />
		<!-- 作废检测弹框 -->
		<u-modal v-model="voidModal1" title="温馨提示" show-cancel-button="true" :content-style="{ 'line-height': '1.5' }"
			content="作废本次检测之后，本次检测的数据无法恢复，请确认是否结束本次检测？" @confirm="voidConfirm" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- 作废维保弹框 -->
		<u-modal v-model="voidModal" title="请输入作废原因" show-cancel-button="true" :content-style="{ 'line-height': '1.5' }"
			@confirm="voidConfirm">
			<view class="slot-content ff-padding-15">
				<view class="ff-font-13 ff-margin-bottom-10">作废本次检测之后，数据清零且无法恢复，正在执业的人员将被强制暂停，请确认是否作废本次检测？</view>
				<textarea v-model.trim="reason" maxlength="-1" class="ff-border-radius-5 ff-padding-5 ff-font-14"
					placeholder="*请输入"></textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'projectdetectionRecord',
		data() {
			return {
				rescindModal: false, // 解约弹框显/隐
				reportModal: false, // 报告书弹框显/隐
				voidId: '', // 作废检测的id
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				// 获取检测详情页请求的参数
				params: {
					testId: '',
					longitude: '',
					latitude: ''
				},
				detectionDetails: {}, // 检测详情页数据
				voidModal: false, // 作废维保弹框显/隐
				reason: '', // 作废原因
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', e);
			this.params.testId = e.id;
			this.getdetectionDetails(e.id); // 获取检测详情页数据
		},
		computed: {
			// 用户角色状态
			...mapState({
				roleStatus: modules => modules.infoList.roleStatus
			}),
			tabberStyle() {
				return `top:${this.customBar}px;`;
			},
			paddingTop() {
				return `padding-top:${this.customBar}px;`;
			}
		},
		methods: {
			// 作废本次维保---打开弹框
			// 作废本次维保前校验
			async voidMechanismClick(item) {
				// console.log('作废本次维保前校验', item)
				let that = this
				this.$refs.loading.openLoading('校验中···');
				const data = await this.$http.post({
					url: `/bsTestProjectInfo/org/cancelCheck/?id=` + item.id
				})
				// console.log('作废本次维保前校验', data)
				if (data.code == 200) {
					if (data.data.status == 1) {
						uni.showModal({
							title: '温馨提示',
							content: data.data.msg,
							confirmColor: '#3178FF',
							cancelColor: '#606266',
							success: res => {
								if (res.confirm) {
									that.voidMechanismClick1(item.id)
								}
							}
						});
					} else {
						that.voidMechanismClick1(item.id)
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			voidMechanismClick1(id) {
				this.voidId = id;
				this.voidModal = true;
			},
			// 作废本次维保---确定操作
			voidConfirm() {
				this.voidModal = true;
				if (!this.reason) {
					this.$refs.uToast.show({
						title: '请输入作废原因',
						type: 'error'
					});
					return
				}
				this.$refs.loading.openLoading('作废中···');
				let params = {
					id: this.voidId,
					reason: this.reason
				}
				this.$http.post({
					url: '/bsTestProjectInfo/org/cancel',
					data: params
				}).then(res => {
					// console.log('作废本次维保返回的结果数据-----', res);
					this.$refs.loading.closeLoading();
					this.reason = ''
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						});
						this.voidModal = false;
						this.getdetectionDetails(); // 获取检测详情页数据
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				});
			},
			// 获取检测详情页数据
			async getdetectionDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/bsTestProjectInfo/org/detail`,
					data: {
						testId: this.params.testId
					}
				});
				// console.log('获取检测详情页数据------', data);
				if (data.code == 200) {
					this.detectionDetails = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 解约合同
			rescindClick() {
				this.rescindModal = true;
			},
			// 解约合同（确认）
			async rescindConfirm() {
				this.$refs.loading.openLoading('解约中···');
				const data = await this.$http.post({
					url: `/bsTestProjectInfo/org/rescission/confirm/${this.detectionDetails.id}`
				});
				// console.log('解约合同（确认）-----', data);
				if (data.code == 200) {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'success'
					});
					this.getdetectionDetails(this.detectionDetails.id); // 获取检测详情页数据
				} else {
					uni.showModal({
						title: '温馨提醒',
						content: data.msg,
						showCancel: false,
						confirmColor: '#3178FF',
						success: res => {
							if (res.confirm) {}
						}
					})
				}
				this.$refs.loading.closeLoading();
			},
			// 跳转详细的需求详情页数据
			demandDetailsClick() {
				this.$pageJump.navigateTo('/pages/detection/common/square/components/demandDetails?id=' + this.params
					.testId);
			},
			// 跳转检测详情页面
			mechanismDetailsClick(item) {
				this.$pageJump.navigateTo('/pages/detection/mechanism/home/components/details/detectionDetails?id=' +
					item.id);
			},
			// 跳转到报告书页面
			vieWReportClick(item) {
				if (item.reportQrcodeUrl != '' && item.reportQrcodeUrl != null) {
					this.$pageJump.navigateTo('/pages/detection/mechanism/home/components/details/Report?id=' + item
						.id);
				} else {
					this.reportModal = true; // 提示无法查看报告书
				}
			},
			// 检测报告
			reportClick() {
				let that = this
				console.log(that.detectionDetails.reportUrl, that.detectionDetails)
				if (!that.detectionDetails.reportUrl) {
					that.$refs.uToast.show({
						title: '检测报告生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				that.$refs.loading.openLoading('检测报告获取中···');
				uni.downloadFile({
					url: that.detectionDetails.reportUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								that.$refs.loading.closeLoading();
								// console.log('打开文档成功');
							}
						});
					}
				});
			},
			// 检测档案
			files() {
				let that = this
				if (!that.detectionDetails.archiveUrl) {
					that.$refs.uToast.show({
						title: '检测档案生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				that.$refs.loading.openLoading('报告书获取中···');
				uni.downloadFile({
					url: that.detectionDetails.archiveUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								that.$refs.loading.closeLoading();
								// console.log('打开文档成功');
							}
						});
					}
				});
			},
			// 合同
			contract() {
				let that = this
				if (!that.detectionDetails.contractUrl) {
					that.$refs.uToast.show({
						title: '合同生成中，请稍后再试',
						type: 'warning'
					});
					return;
				}
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];
				const ext = that.detectionDetails.contractUrl.split('.').pop().toLowerCase(); // toLowerCase转换为小写
				console.log('ext', ext)
				if (imageExtensions.includes(ext)) {
					let put = []
					put.push(that.detectionDetails.contractUrl)
					uni.previewImage({
						current: that.detectionDetails.contractUrl,
						urls: put
					});
				} else {
					that.$refs.loading.openLoading('合同获取中···');
					uni.downloadFile({
						url: that.detectionDetails.contractUrl,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									that.$refs.loading.closeLoading();
									// console.log('打开文档成功');
								}
							});
						}
					});
				}
			},
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	@import './components/projectDetails.scss';

	textarea {
		width: 92%;
		border: 2rpx solid #999;
		height: 200rpx;
	}
</style>